<template>
	<view>
		<uv-status-bar v-if="statusBar" />
		<view class="untreated">
			<view v-for="(i, k) in dataList" :key="k" class="untreated-item" @click="handleTask(i)">
				<uv-icon :name="i.icon" color="#4EA770" size="56rpx" :label="i.title" label-color="#212121"
					label-size="28rpx" />
				<uv-icon name="arrow-right" color="#757575" size="24rpx" :label="i.value == 0 ? '' : i.value"
					label-color="#757575" label-pos="left" label-size="28rpx" />
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted,
		watch,
		onBeforeUnmount
	} from "vue";
	import {
		getStatistics
	} from "@/request/home";

	const props = defineProps({
		// 是否下拉刷新
		refresh: {
			type: Boolean,
			default: false,
		},
		// 是否显示状态栏
		statusBar: {
			type: Boolean,
			default: true
		}
	});

	const emit = defineEmits(["onRefresh", "update:refresh", "count"]);

	const dataList = ref([{
			title: "待审批报告",
			icon: "/static/icon_examine.png",
			value: 0,
			path: "/pages/Home/examReport",
		},
		{
			title: "待处理工单",
			icon: "/static/icon_pend_order.png",
			value: 0,
			path: "/pages/Order/index",
		},
	]); // 数据列表

	onMounted(() => {
		getList();
		uni.$on("untreated", () => {
			getList();
		});
	});

	onBeforeUnmount(() => {
		uni.$off("untreated");
	});

	watch(
		props,
		(v) => {
			if (v.refresh) {
				setTimeout(() => {
					getList();
				}, 0);
			}
		}, {
			immediate: true,
			deep: true
		}
	);

	// 获取待办任务数量
	const getList = () => {
		getStatistics()
			.then((res) => {
				if (res.code == 200) {
					dataList.value[0].value = res.data.reportNum;
					dataList.value[1].value = res.data.handleWorkOrderNum;
					let count = 0;
					dataList.value.forEach((i) => {
						count += i.value;
					});
					emit("count", {
						count,
						label: "待办事项",
						name: '我的审批'
					});
				}
			})
			.finally(() => {
				emit("onRefresh", false);
				emit("update:refresh", false);
				uni.stopPullDownRefresh();
			});
	};

	// 查看待办任务
	const handleTask = (item) => {
		uni.navigateTo({
			url: item.path,
		});
	};
</script>
<style lang="scss" scoped>
	.untreated {
		width: auto;
		margin: 30rpx 40rpx;
		background-color: #ffffff;
		box-shadow: 0 0 20rpx 2rpx rgba(117, 117, 117, 0.16);
		border-radius: 20rpx;

		.untreated-item {
			height: 120rpx;
			display: flex;
			box-sizing: border-box;
			padding: 32rpx;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f1f1f1;

			&:active {
				background-color: rgba(241, 241, 241, 0.36);
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}
</style>